﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>图片管理</title>
    <style type="text/css">
        .list_item {
            min-height: 40px;
            line-height: 40px;
        }

        .list_item_active {
            color: #22b14c;
            border-right: 3px solid #22b14c;
        }

        .nodata {
            min-height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: #ededed;
            color: #888;
        }

        .app-item {
            background-color: #ccc;
            border-radius: 3px;
            margin-right: 5px;
            margin-bottom: 5px;
            padding: 5px;
            color: #888;
        }

            .app-item:hover {
                opacity: 0.8;
                cursor: pointer;
            }

        .img-item {
            width: 100%;
            height: 160px;
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body style="background-color:#f0f0f0;">
    <div style="max-width:1000px;margin:0 auto;">
        <div style="min-height:40px;line-height: 40px;display:flex;">
            <div style="flex: 1; text-align: left;">
                <a class="btn btn-default" href="javascript:void(0);" onclick="scan(this,0)">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>自定义扫描</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="scan(this,1)">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>全盘扫描</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="rate_changed(this)" data-rate="1.7,1.8">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>16:9</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="rate_changed(this)" data-rate="1.3,1.4">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>4:3</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="rate_changed(this)" data-rate="1,1">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>1:1</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="width_changed(this)" data-width="4000,4200">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>4K</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="width_changed(this)" data-width="2000,2100">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>2K</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="height_changed(this)" data-height="1000,1100">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>1080P</span>
                </a>
                <a class="btn btn-default" href="javascript:void(0);" onclick="height_changed(this)" data-height="700,750">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    <span>720P</span>
                </a>
            </div>
            <div style="width:160px;text-align:right;">
            </div>
        </div>
        <div style="display: flex; flex-wrap: wrap;">
            <div style="width:200px;">
                <span>文件名：</span>
                <input id="_input_fileName" type="text" />
            </div>
            <div style="width:200px;">
                <span>文件大小：</span>
                <input id="_input_fileLength" type="text" />
            </div>
            <div style="width:200px;">
                <span>宽度</span>
                <input id="_input_width" type="text" />
            </div>
            <div style="width:200px;">
                <span>高度</span>
                <input id="_input_height" type="text" />
            </div>
            <div style="width:200px;">
                <span>宽高比</span>
                <input id="_input_rate" type="text" />
            </div>
            <div style="width:200px;">
                <button onclick="change_filter(this)">查询</button>
            </div>
        </div>
        <div id="_div_container" style="display: flex; border: 1px solid #ccc; background-color: #fff; box-shadow: 0 0 3px #ccc;">
            <div id="_div_directories" style="width:200px;overflow-y: auto;"></div>
            <div id="_div_files" style="flex:1;overflow-y: auto;"></div>
        </div>
    </div>
    <script src="/jquery.js"></script>
    <script src="/util.js"></script>
    <script>
        $(function () {
            var ht = document.documentElement.clientHeight - 120;
            $('#_div_directories').css('height', ht + 'px');
            $('#_div_files').css('height', ht + 'px');
            get_directories(function (directories) {
                get_files_data.parentFullName = directories[0].FullName;
                get_files();
            });
        });
    </script>
    <script>
        var get_directories_data = {
        };
        function get_directories(callback) {
            $.ajax({
                url: '/Img/GetDirectories',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(get_directories_data),
                dataType: 'json',
                complete: function (xhr, status) {
                    var msg = '加载失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                        master.show_toast(msg);
                        return;
                    }

                    if (rsp && rsp.data && rsp.data.length > 0) {
                        var sb = '';
                        for (var i = 0; i < rsp.data.length; i++) {
                            var item = rsp.data[i];
                            var active = i == 0 ? ' list_item_active' : '';
                            sb += `<div style="display:flex;" class="list_item${active}" data-id="${item.FullName}" onclick="change_directory(this)" onmouseenter="item_mouseenter(this)" onmouseleave="item_mouseleave(this)">`;
                            sb += `<div style="flex:1;text-align:left;padding:0 5px;">${item.FileName}</div>`;
                            sb += `<div style="width:40px;text-align:right;padding:0 5px;">${item.Count}</div>`;
                            sb += '</div>';
                        }

                        $('#_div_directories').html(sb);
                        callback && callback(rsp.data);
                    } else {
                        $('#_div_container').html('<div class="nodata" style="flex:1;">没有符合条件的图片哦</div>');
                    }
                }
            });
        }

        var get_files_data = {
            page: 1,
            pageSize: 20
        };
        function get_files(callback) {
            $.ajax({
                url: '/Img/GetFiles',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(get_files_data),
                dataType: 'json',
                complete: function (xhr, status) {
                    var msg = '加载失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                        master.show_toast(msg);
                        return;
                    }

                    var sb = '';
                    if (rsp.data && rsp.data.rows && rsp.data.rows.length > 0) {
                        sb += '<div style="border-bottom:1px dotted #22b14c;display:flex;min-height:40px;line-height:40px;">';
                        sb += '<div style="width:200px;text-align:left;">共' + rsp.data.rc + '条数据</div>';
                        sb += '<div style="flex:1;text-align:right;">';
                        var tp = 0;
                        if (rsp.data.rc > 0) {
                            tp = Math.floor(rsp.data.rc / get_files_data.pageSize);
                            if (rsp.data.rc % get_files_data.pageSize !== 0) {
                                tp += 1;
                            }
                        }
                        sb += '<span>第' + get_files_data.page + '/' + tp + '页</span>&nbsp;';
                        if (get_files_data.page > 1) {
                            sb += '<a href="javascript:;" onclick="change_page(1)">首页</a>&nbsp;';
                            sb += '<a href="javascript:;" onclick="change_page(' + (get_files_data.page - 1) + ')">上一页</a>&nbsp;';
                        }
                        if (get_files_data.page < tp) {
                            sb += '<a href="javascript:;" onclick="change_page(' + (get_files_data.page + 1) + ')">下一页</a>&nbsp;';
                            sb += '<a href="javascript:;" onclick="change_page(' + tp + ')">末页</a>&nbsp;';
                        }
                        sb += '</div>';
                        sb += '</div>';
                        sb += '<div style="display:flex;flex-wrap: wrap;">';
                        for (var i = 0; i < rsp.data.rows.length; i++) {
                            var item = rsp.data.rows[i];
                            var cover = item.FileName ? `/Img/View?filename=${encodeURIComponent(item.FileName)}&token=${encodeURIComponent(item.ViewFile)}` : '/img404.png';
                            var title = item.FileName || '无标题';
                            var views = item.Views ? `<span>${item.Views}次查看</span>` : '';
                            var score = item.Score ? `<span>${item.Score}评分</span>` : '';
                            var ts = '';
                            if (item.CreateTime) {
                                ts = util.ts_display(new Date(item.CreateTime), new Date())
                                if (ts.indexOf('-') < 0) {
                                    ts += '前';
                                }
                            }
                            sb += `
<div style="width:calc(25% - 5px);box-sizing:border-box;" class="app-item">
<div class="img-item" style="background-image:url(${cover});"></div>
<div>${title}</div>
<div style="display:flex;">
<div style="flex:1;">${views}${score}</div>
<div style="width:90px;text-align:right;">${ts}</div>
</div>
</div>`;
                        }
                        sb += '</div>';
                    } else {
                        sb += '<div class="nodata">没有相关数据</div>';
                    }
                    $('#_div_files').html(sb);
                }
            });
        }

        function rate_changed(sender) {
            var rate = $(sender).attr('data-rate');
            get_directories_data.rate = rate;
            get_directories_data.width = null;
            get_directories_data.height = null;
            get_directories(function (directories) {
                get_files_data.parentFullName = directories[0].FullName;
                get_files_data.rate = rate;
                get_files_data.width = null;
                get_files_data.height = null;
                get_files();
            });
        }

        function width_changed(sender) {
            var width = $(sender).attr('data-width');
            get_directories_data.rate = null;
            get_directories_data.width = width;
            get_directories_data.height = null;
            get_directories(function (directories) {
                get_files_data.parentFullName = directories[0].FullName;
                get_files_data.rate = null;
                get_files_data.width = width;
                get_files_data.height = null;
                get_files();
            });
        }

        function height_changed(sender) {
            var height = $(sender).attr('data-height');
            get_directories_data.rate = null;
            get_directories_data.width = null;
            get_directories_data.height = height;
            get_directories(function (directories) {
                get_files_data.parentFullName = directories[0].FullName;
                get_files_data.rate = null;
                get_files_data.width = null;
                get_files_data.height = height;
                get_files();
            });
        }

        function change_page(page) {
            get_files_data.page = page;
            get_files();
        }

        function change_filter(sender) {
            var fileName = $('#_input_fileName').val();
            var fileLength = $('#_input_fileLength').val();
            var width = $('#_input_width').val();
            var height = $('#_input_height').val();
            var rate = $('#_input_rate').val();
            get_directories_data.fileName = fileName;
            get_directories_data.fileLength = fileLength;
            get_directories_data.width = width;
            get_directories_data.height = height;
            get_directories_data.rate = rate;
            get_directories(function (directories) {
                get_files_data.parentFullName = directories[0].FullName;
                get_files_data.fileName = fileName;
                get_files_data.fileLength = fileLength;
                get_files_data.width = width;
                get_files_data.height = height;
                get_files_data.rate = rate;
                get_files();
            });
        }

        function change_directory(sender) {
            $(sender).addClass('list_item_active');
            $(sender).siblings().removeClass('list_item_active');

            var id = $(sender).attr('data-id');
            get_files_data.parentFullName = id;
            get_files();
        }

        var scanget_files_data = {
            exts: '.png|.jpg|.jpeg|.gif',
            minFileLength: 50 * 1024
        };
        function scan(sender) {
            $.ajax({
                url: '/Img/Scan',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(scanget_files_data),
                dataType: 'json',
                complete: function (xhr, status) {
                    var msg = '加载失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                    }

                    if (rsp && rsp.data) {
                        master.show_toast(rsp.data);
                        return;
                    }

                    master.show_toast(msg);
                }
            });
        }

        var _item_background;

        var _item_cursor;

        function item_mouseenter(sender) {
            _item_background = sender.style.backgroundColor;
            _item_cursor = sender.style.cursor;
            sender.style.backgroundColor = '#f0f0f0';
            sender.style.cursor = 'pointer';

            var el = $(sender).find('.item_operations');
            if (el) {
                $(el).show();
            }
        }

        function item_mouseleave(sender) {
            sender.style.backgroundColor = _item_background;
            sender.style.cursor = _item_cursor;

            var el = $(sender).find('.item_operations');
            if (el) {
                $(el).hide();
            }
        }

        function get_real_length(input) {
            var sum = 0;
            if (input) {
                for (var i = 0; i < input.length; i++) {
                    var ch = input.charCodeAt(i);
                    if (ch <= 255) {
                        sum += 1;
                    } else {
                        sum += 2;
                    }
                }
            }
            return sum;
        }

        function sub_real_length(input, num) {
            var input_sub = '';
            var sum = 0;
            if (input) {
                for (var i = 0; i < input.length; i++) {
                    var ch = input.charCodeAt(i);
                    if (ch <= 255) {
                        sum += 1;
                    } else {
                        sum += 2;
                    }
                    if (sum < num) {
                        input_sub += input[i];
                    }
                }
            }
            return input_sub;
        }

        function choose_all(sender) {
            var items = document.getElementsByClassName('choose_one');
            for (var i = 0; i < items.length; i++) {
                items[i]['checked'] = sender['checked'];
            }
        }

        var master = {
            show_toast: function (msg, bgColor, color, ms) {
                if (!bgColor) {
                    bgColor = '#22b14c';
                }

                if (!color) {
                    color = '#fff';
                }

                if (ms == null) {
                    ms = 1500;
                }

                var el_id = "_div_toast_container";
                var el = document.getElementById(el_id);
                if (!el) {
                    el = document.createElement('div');
                    el.setAttribute('id', el_id);
                    el.style.width = '300px';
                    el.style.height = '400px';
                    el.style.position = 'fixed';
                    el.style.left = '50%';
                    el.style.top = '50%';
                    el.style.marginLeft = '-150px';
                    el.style.marginTop = '-200px';
                    el.style.overflow = 'hidden';
                    document.body.appendChild(el);
                }

                el.style.display = 'block';
                var toast_id = '_div_toast_' + new Date().getTime() + Math.floor(1000000 * Math.random());
                var sb = '';
                sb += '<div id="' + toast_id + '" style="text-align:center;margin-bottom:10px;"><span style="display:inline-block;box-shadow:0 0 2px #000;padding:10px 20px;border-radius:8px;background-color:' + bgColor + ';color:' + color + ';">' + msg + '</span></div>';
                $(el).append(sb);

                if (ms > 0) {
                    setTimeout(function () {
                        $('#' + toast_id).remove();
                    }, ms);
                }
            }
        };

        function get_selected_ids() {
            var ids = [];
            var items = document.getElementsByClassName('choose_one');
            for (var i = 0; i < items.length; i++) {
                if (items[i]['checked']) {
                    var id = $(items[i]).attr('data-id');
                    ids.push(id);
                }
            }
            return ids;
        }

        function del_one(sender) {
            var title = $(sender).attr('data-title');
            var url = $(sender).attr('data-url');
            if (!confirm('确定要删除 【' + title + '】【' + url + '】 吗')) {
                return;
            }

            var id = $(sender).attr('data-id');
            del_real(id);
        }

        function del_many(sender) {
            var ids = get_selected_ids();
            if (ids.length == 0) {
                master.show_toast('请选择要删除的书签', '#ff7f27');
                return;
            }

            if (!confirm('确定要删除选中的' + ids.length + '个书签吗')) {
                return;
            }

            del_real(ids.join(','));
        }

        function del_real(ids) {
            $.ajax({
                url: '/del',
                type: 'POST',
                data: { ids },
                complete: function (xhr, status) {
                    var msg = '删除失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                    }

                    if (rsp && rsp.data) {
                        master.show_toast(rsp.data);
                        load_data();
                        return;
                    }

                    master.show_toast(msg);
                }
            });
        }

        function del_invalids() {
            var ids = get_selected_ids();
            if (ids.length == 0) {
                if (!confirm('未选择书签，将删除全部无效的书签，是否继续')) {
                    return;
                }
            }

            $.ajax({
                url: '/delinvalids',
                type: 'POST',
                data: { ids: ids.join(',') },
                complete: function (xhr, status) {
                    var msg = '删除失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                    }

                    if (rsp && rsp.data) {
                        master.show_toast(rsp.data);
                        load_data();
                        return;
                    }

                    master.show_toast(msg);
                }
            });
        }

        function del_duplicate() {
            if (!confirm('将删除重复的书签，是否继续')) {
                return;
            }

            $.ajax({
                url: '/delduplicate',
                type: 'POST',
                data: {},
                complete: function (xhr, status) {
                    var msg = '去重失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                    }

                    if (rsp && rsp.data) {
                        master.show_toast(rsp.data);
                        load_data();
                        return;
                    }

                    master.show_toast(msg);
                }
            });
        }

        function refresh() {
            var ids = get_selected_ids();
            if (ids.length == 0) {
                if (!confirm('未选择书签，将检测全部的书签状态，是否继续')) {
                    return;
                }
            }

            $.ajax({
                url: '/refresh',
                type: 'POST',
                data: { ids: ids.join(',') },
                complete: function (xhr, status) {
                    var msg = '操作失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                    }

                    if (rsp && rsp.data) {
                        master.show_toast(rsp.data);
                        load_data();
                        return;
                    }

                    master.show_toast(msg);
                }
            });
        }

        function reset() {
            var ids = get_selected_ids();
            if (ids.length == 0) {
                if (!confirm('未选择书签，将重置全部的书签状态，是否继续')) {
                    return;
                }
            }

            $.ajax({
                url: '/reset',
                type: 'POST',
                data: { ids: ids.join(',') },
                complete: function (xhr, status) {
                    var msg = '操作失败，请稍后再试';
                    if (status != "success") {
                        master.show_toast(msg);
                        return;
                    }

                    var rsp;
                    try {
                        rsp = JSON.parse(xhr.responseText);
                    } catch (e) {
                    }

                    if (rsp && rsp.error_message) {
                        msg = rsp.error_message;
                    }

                    if (rsp && rsp.data) {
                        master.show_toast(rsp.data);
                        load_data();
                        return;
                    }

                    master.show_toast(msg);
                }
            });
        }
    </script>
</body>
</html>